<template>
<!--  <div class="notice" v-if="isShow">
    <CloseCircleOutlined @click="close"/>
    <h3>{{title}}</h3>
    <p v-html="content"></p>
  </div>-->
</template>

<script lang="ts" >
import {defineComponent, onMounted, ref} from 'vue';
import {} from 'ant-design-vue';
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import {getUrgentApi} from "/@/api/theme";
export default defineComponent({
  components: { CloseCircleOutlined },
  setup() {
    const isShow = ref<Boolean>(false)
    const title = ref<string>("")
    const content = ref("")
    const close = ()=>{
      isShow.value = false
    }

    const getUrgent = async ()=> {

      let data = await getUrgentApi();
      // dynamicsList.value = data.records;
      if (data) {
        isShow.value = true;
        title.value = data.articleTitle;
        content.value = data.articleContent;
      }
    }

    const init = () => {
      // getUrgent()
    }

    onMounted(init)

    return {
      close , isShow, title, content
    }
  }
})
</script>

<style lang="less" scoped>
.notice{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  width: 540px;
  height: 340px;
  padding: 20px 35px;
  margin: -180px 0 0 -270px;
  background: #F7860C;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  transition: all 1s ease-in-out;

  h3{
    display: block;
    font-size: 24px;
    color: #fff;
    text-align: center;
  }

  p{
    padding: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #fff;
    text-indent: 2em;
  }

  .anticon-close-circle{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
  }
}


</style>

